<template>
  <div id="app">
    <cj-input v-model="value" type="int" :decimal="3" border maxlength="10" chinese-double clearable></cj-input>
    <div class="list">
      <cj-lazy-render :list="list">
        <template slot="item" slot-scope="{row, index}">
          <div class="listItem">{{row}}-------{{index}}</div>
        </template>
        <div slot="loading">加载中</div>
      </cj-lazy-render>
    </div>
    <div class="imgWrap">
      <cj-lazy-image v-for="(item, index) in imgList" :key="index"
        :url="`https://picsum.photos/200/${180 + index}`"
        class="img"></cj-lazy-image>
    </div>
    <van-icon name="photo-fail"></van-icon>
  </div>
</template>

<script>
import { Icon } from 'vant'
import 'vant/lib/icon/style'
import { CjInput, CjLazyImage, CjLazyRender } from '../packages/index'
export default {
  components: {
    [Icon.name]: Icon,
    CjInput,
    CjLazyImage,
    CjLazyRender
  },
  data () {
    return {
      value: '',
      list: [],
      imgList: []
    }
  },
  mounted () {
    // const list = []
    for (let i = 0; i < 30; i++) {
      this.list.push(i)
    }
    // this.list = list
    this.imgList = new Array(200).fill(11)
  }
}
</script>

<style lang="less">
html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}
.list {
  height: 400px;
  .listItem {
    height: 40px;
  }
}
.imgWrap {
  display: flex;
  height: 400px;
  width: 100px;
  flex-wrap: wrap;
  .img {
    width: 50px;
    height: 50px;
  }
}
</style>
